<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>{{ firstName }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ secondName }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="thirdName">{{ thirdName }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const asyncRoutes = [];
const files = import.meta.glob("@/router/modules/*.js", { eager: true });
for (const f in files) {
  const o = files[f].default;
  asyncRoutes.push(o);
}
// console.log(asyncRoutes, "路由菜单");
const firstName = ref("");
const secondName = ref("");
const thirdName = ref();
onMounted(() => {
  const route = window.location.hash.substr(1);

  asyncRoutes.map((item) => {
    // console.log("item ===>", item);
    if (item.children) {
      item.children.forEach((child) => {
        // console.log("child ===>", child);
        if (child.children) {
          child.children.forEach((child2) => {
            // console.log("child ===>", child2);
            if (child2.path === route) {
              //   console.log("firstName ===>", item.meta.title);
              //   console.log("secondName ===>", child.meta.title);
              //   console.log("thirdName ===>", child2.meta.title);
              firstName.value = item.meta.title;
              secondName.value = child.meta.title;
              thirdName.value = child2.meta.title;
            }
          });
        } else {
          if (child.path === route) {
            // console.log("firstName ===>", item.meta.title);
            // console.log("secondName ===>", child.meta.title);
            firstName.value = item.meta.title;
            secondName.value = child.meta.title;
          }
        }
      });
    }
  });
});
</script>

<style lang="less">
.el-breadcrumb__inner {
  font-size: 14px;
  color: #666666;
  font-weight: 600;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}
</style>